<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">填表人</label>
            <div class="layui-input-inline">
                <input type="tel" name="fill_from" placeholder="填表人" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出差人数</label>
            <div class="layui-input-inline">
                <input type="text" name="number_people" placeholder="出差人数"   autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">填表时间</label>
            <div class="layui-input-inline">
                <input type="text" name="fill_time" placeholder="填表时间" id="fill_time" lay-verify="date"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">起止</label>
            <div class="layui-input-inline">
                <input type="text" name="start_time" id="start_time" placeholder="日期" lay-verify="date"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">起止</label>
            <div class="layui-input-inline">
                <input type="text" name="start_site" id="start_site" placeholder="地点"   autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">止点</label>
            <div class="layui-input-inline">
                <input type="text" name="end_time" placeholder="日期" id="end_time" lay-verify="date"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">止点</label>
            <div class="layui-input-inline">
                <input type="text" name="end_site" placeholder="地点" id="end_site"   autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">伙食补助</label>
            <div class="layui-input-inline">
                <input type="text" name="eat_subsidy_day" id="eat_subsidy_day"  autocomplete="off" placeholder="天数" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">伙食补助</label>
            <div class="layui-input-inline">
                <input type="text" name="eat_subsidy_standard" id="eat_subsidy_standard" placeholder="标准"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">伙食补助</label>
            <div class="layui-input-inline">
                <input type="text" name="eat_subsidy_money" id="eat_subsidy_money" placeholder="金额"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">住宿费</label>
            <div class="layui-input-inline">
                <input type="text" name="stay_day" id="stay_day" placeholder="天"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">住宿费</label>
            <div class="layui-input-inline">
                <input type="text" name="stay_standard" id="stay_standard" placeholder="标准"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">住宿费</label>
            <div class="layui-input-inline">
                <input type="text" name="stay_money" id="stay_money" placeholder="金额"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">车船费</label>
            <div class="layui-input-inline">
                <input type="text" name="traffic_kind"  placeholder="种类"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">车船费</label>
            <div class="layui-input-inline">
                <input type="text" name="traffic_money" id="traffic_money" placeholder="金额"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">卧铺补助</label>
            <div class="layui-input-inline">
                <input type="text" name="sleeper_standard" placeholder="标准"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">卧铺补助</label>
            <div class="layui-input-inline">
                <input type="text" name="sleeper_money" id="sleeper_money" placeholder="金额"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">市内交通费</label>
            <div class="layui-input-inline">
                <input type="text" name="city_traffic_day" id="city_traffic_day"  autocomplete="off" placeholder="天数" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">市内交通费</label>
            <div class="layui-input-inline">
                <input type="text" name="city_traffic_standard" id="city_traffic_standard" placeholder="标准"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">市内交通费</label>
            <div class="layui-input-inline">
                <input type="text" name="city_traffic_money" id="city_traffic_money" placeholder="金额"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">路桥费</label>
            <div class="layui-input-inline">
                <input type="text" name="road_bridge_money" id="road_bridge_money"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">其他</label>
            <div class="layui-input-inline">
                <input type="text" name="other"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">合计</label>
            <div class="layui-input-inline">
                <input type="text" name="total" id="total"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">出差人</label>
            <div class="layui-input-inline">
                <input type="text" name="business_people"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">室(部)负责人</label>
            <div class="layui-input-inline">
                <input type="text" name="department_head"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">分管领导</label>
            <div class="layui-input-inline">
                <input type="text" name="brancher_leader"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">办公室主任</label>
            <div class="layui-input-inline">
                <input type="text" name="secretary"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">主管办公室副书记</label>
            <div class="layui-input-inline">
                <input type="text" name="other"  autocomplete="off" placeholder="壹万元及以上" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">审批领导</label>
            <div class="layui-input-inline">
                <input type="text" name="examine_leader"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-upload" style="margin-left: 20px">
        <button type="button" class="layui-btn" id="upload_expense" style="float: left">上传报销单原件</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="file_id" id="file_id">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="addUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<style>
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
<script>

    //伙食补助
    $(document).on('change', '#eat_subsidy_standard,#eat_subsidy_day', function(){
        var _this = $(this);
        var eat_subsidy_standard =   parseInt($('#eat_subsidy_standard').val())
            ,eat_subsidy_day =         parseInt($('#eat_subsidy_day').val());
        var eat_subsidy_total = 0;
        if(!isNaN(eat_subsidy_standard) && !isNaN(eat_subsidy_day)){
            eat_subsidy_total = eat_subsidy_standard * eat_subsidy_day;
        }

        $('#eat_subsidy_money').val(eat_subsidy_total);
    });

    //住宿补助

    $(document).on('change', '#stay_day,#stay_standard', function(){
        var _this = $(this);
        var stay_day =   parseInt($('#stay_day').val())
            ,stay_standard = parseInt($('#stay_standard').val());
        var stay_total = 0;
        if(!isNaN(stay_day) && !isNaN(stay_standard)){
            stay_total = stay_day * stay_standard;
        }
        $('#stay_money').val(stay_total);
    });

    //市内交通费
    //city_traffic_day city_traffic_standard city_traffic_money
    $(document).on('change', '#city_traffic_day,#city_traffic_standard', function(){
        var _this = $(this);
        var city_traffic_day =   parseInt($('#city_traffic_day').val())
            ,city_traffic_standard = parseInt($('#city_traffic_standard').val());
        var city_traffic_total = 0;
        if(!isNaN(city_traffic_day) && !isNaN(city_traffic_standard)){
            city_traffic_total = city_traffic_day * city_traffic_standard;
        }
        $('#city_traffic_money').val(city_traffic_total);
    });


    $(document).on('change', '#eat_subsidy_money,#stay_money,#traffic_money,#sleeper_money,#city_traffic_money,' +
        '#road_bridge_money,#city_traffic_standard,#eat_subsidy_standard,#stay_standard,#city_traffic_standard,#city_traffic_standard,#stay_day,#eat_subsidy_day',
        function(){
            var _this = $(this);
            var eat_subsidy_money =   parseInt($('#eat_subsidy_money').val())
                ,stay_money =         parseInt($('#stay_money').val())
                ,traffic_money =      parseInt($('#traffic_money').val())
                ,sleeper_money =      parseInt($('#sleeper_money').val())
                ,city_traffic_money = parseInt($('#city_traffic_money').val())
                ,road_bridge_money = parseInt($('#road_bridge_money').val());
            console.log(eat_subsidy_money);
            console.log(stay_money);
            var total = 0;
            if(!isNaN(eat_subsidy_money))  total +=  eat_subsidy_money;
            if(!isNaN(stay_money))  total +=  stay_money;
            if(!isNaN(traffic_money))  total +=  traffic_money;
            if(!isNaN(sleeper_money))  total +=  sleeper_money;
            if(!isNaN(city_traffic_money))  total +=  city_traffic_money;
            if(!isNaN(road_bridge_money))  total +=  road_bridge_money;
            console.log(total);
            $('#total').val(total);
        });

    layui.use(['form', 'laydate','upload'], function(){
        var form = layui.form
            , layer = layui.layer
            ,upload = layui.upload
            ,laydate = layui.laydate;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload_expense'
            ,url: '{:url("/finance/Expense/uploadImg")}' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code < 0){
                    return layer.msg('上传失败');
                }
                $('#file_id').val(res.data.file_id);
                return layer.msg('上传成功');
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //日期
        laydate.render({
            elem: '#fill_time'
        });
        laydate.render({
            elem: '#start_time'
        });
        laydate.render({
            elem: '#end_time'
        });
        //监听提交
        form.on('submit(addUser)', function(data){

            $.ajax({
                url: '{:url("/finance/Expense/ajaxAddExpense")}',
                type: 'post',
                dataType: 'json',
                data:{data:data.field},
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if(res.code == 1){
                        layer.msg('添加成功', {icon: 1});
                        layer.closeAll();
                        return false;
                    }
                    layer.alert(res.msg, {icon: 2}); return false;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
            return false;
        });
    });
</script>